<template>
  <div class="flight-statistics">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">飞行架次统计</h3>
    </div>
    <!-- 内容 -->
    <div class="panel-content">
      <div id="flight-statistics-chart" class="chart-container"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

let chartInstance = null

// 初始化图表
const initChart = () => {
  const chartDom = document.getElementById('flight-statistics-chart')
  chartInstance = echarts.init(chartDom)
  
  const option = {
    grid: {
      top: 30,
      right: 25,
      bottom: 20,
      left: 25
    },
    xAxis: {
      type: 'category',
      data: ['04-10', '04-11', '04-12', '04-13', '04-14'],
      boundaryGap: ['16px', '16px'],
      axisLine: {
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      axisLabel: {
        color: '#FFFFFF',
        fontSize: 10
      },
      axisTick: {
        alignWithLabel: true,
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '单位(架次)',
      nameTextStyle: {
        color: '#FFFFFF',
        fontSize: 10
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      axisLabel: {
        color: '#FFFFFF',
        fontSize: 10
      },
      axisTick: {
        lineStyle: {
          color: '#FFFFFF'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#FFFFFF',
          type: 'dashed',
          opacity: 0.3
        }
      },
      min: 0,
      max: 12,
      interval: 2
    },
    series: [
      {
        data: [4, 8, 2, 5, 1],
        type: 'line',
        smooth: true,
        lineStyle: {
          color: '#66FFFF',
          width: 2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(4, 154, 153, 0.8)'
            },
            {
              offset: 1,
              color: 'rgba(4, 154, 153, 0.1)'
            }
          ])
        },
        symbol: 'none',
        label: {
          show: true,
          position: 'top',
          color: '#FFFFFF',
          fontSize: 10,
          fontWeight: 'bold'
        }
      }
    ]
  }
  
  chartInstance.setOption(option)
}

// 监听窗口大小变化
const handleResize = () => {
  chartInstance && chartInstance.resize()
}

onMounted(() => {
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }
})
</script>

<style lang="scss" scoped>
.flight-statistics {
  width: 404px;
  height: 258px;
  background: url('@/assets/images/dashboard_normal_model_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  
  .panel-header {
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: 20px 16px 10px 16px;
    box-sizing: border-box;
    
    .chart-container {
      width: 100%;
      height: 100%;
    }
  }
}
</style>